import { Avatar, Layout, Dropdown } from "antd";
import { Location, useLocation } from "react-router-dom";
import { LogoutOutlined, MenuOutlined } from "@ant-design/icons";
import { items } from "../Aside";
// import { changeShowMenu } from "@/store/app/appSlice";
// import local from "@/utils/local";
// import { useAppDispatch, useAppSelector } from "@/store/hooks";
// import { TZ } from "@/utils/env";
import { usConfigStore } from "../../stores";

const { Header: AntdHeader } = Layout;

export default function Header() {
  const { pathname }: Location = useLocation();
  const { changeShowMenu } = usConfigStore();
  return (
    <AntdHeader
      className="sticky top-0 z-10"
      style={{ backgroundColor: "rgba(255,255,255,0.8)", padding: "0 20px" }}
    >
      <div className="flex justify-between items-center">
        <div
          className="font-bold text-[25px] block lg:hidden"
          onClick={() => changeShowMenu(true)}
        >
          <MenuOutlined className="cursor-pointer" />
        </div>
        <div className="font-bold block">
          {findMenuItemByKey(items, pathname)?.label}
        </div>
        <Dropdown
          trigger={["click"]}
          menu={{
            items: [
              {
                label: "tz",
                key: "tz",
              },
              {
                type: "divider",
              },
              {
                label: <span className="text-[#ff4d4f]">退出登录</span>,
                key: "logout",
                icon: <LogoutOutlined style={{ color: "#ff4d4f" }} />,
                onClick: (): void => {
                  // local.remove("userInfo");
                  location.href = "/login";
                },
              },
            ],
          }}
        >
          <div className="cursor-pointer">
            <Avatar style={{ backgroundColor: "#f56a00" }}>test</Avatar>
            <span className="ml-[5px]">test</span>
          </div>
        </Dropdown>
      </div>
    </AntdHeader>
  );
}

function findMenuItemByKey(menu: any[], key: string): any {
  for (let i = 0; i < menu.length; i++) {
    if (menu[i]?.key === key) {
      return menu[i];
    } else if (menu[i]?.children) {
      const foundChild = findMenuItemByKey(menu[i].children, key);
      if (foundChild) {
        return foundChild;
      }
    }
  }
  return null;
}
